{__NOLAYOUT__}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		
		<title>快排cms</title>
		<style>
			*{margin:0;padding: 0;list-style: none;}
			body{background: #f6f6f6;font-size: 14px;}
			.form{width: 480px;margin:20px auto;}
			.form h3{text-align: center;font-size: 18px;font-weight: normal;color: #000;margin-bottom: 20px;}
			.form li{margin-bottom:6px;}
			.form dt{color: #666;margin-bottom: 5px;font-size: 12px;line-height: normal;}
			.form input{background: #fff;border:solid 1px #ddd;width: 100%;box-sizing: border-box;padding: 8px;outline: none;}
			
			.form input:focus{	border-color: rgb(87, 163, 243);box-shadow: rgba(45, 140, 240, 0.2) 0px 0px 0px 2px;}
			.form input.n-invalid{border-color: #c33;}
			.form input.n-invalid:focus{border-color: #c33;box-shadow: none;}
			.form button{background: #2d8cf0; color: #fff; border:none;outline: none;width: 100%; box-sizing: border-box; padding:8px;text-align: center;display: block;margin-top:20px;}
		</style>
	</head>
	<body>
		<form class="form form-ajax" method="post"  autocomplete="off" data-validator-option="{timely:2, theme:'yellow_right'}">
			<h3>欢迎使用快排CMS</h3>
			<ul>
				<li>
					<dt>数据库地址</dt>
					<dd><input type="text" name="hostname" value="127.0.0.1" data-rule="required" ></dd>
				</li>
				<li>
					<dt>数据库端口</dt>
					<dd><input type="text" name="hostport" value="3306" data-rule="required" ></dd>
				</li>
				<li>
					<dt>数据库名称</dt>
					<dd><input type="text" name="database" value="" data-rule="required" ></dd>
				</li>
				<li>
					<dt>数据库前缀</dt>
					<dd><input type="text" name="prefix" value="kp_" data-rule="required" ></dd>
				</li>
				<li>
					<dt>数据库账户</dt>
					<dd><input type="text" name="username" value="" data-rule="required" ></dd>
				</li>
				<li>
					<dt>数据库密码</dt>
					<dd><input type="text" name="password" value="" data-rule="required" ></dd>
				</li>
				<li>
					<dt>后台用户名</dt>
					<dd><input type="text" name="admin_name" value="admin" data-rule="required" ></dd>
				</li>
				<li>
					<dt>后台密码</dt>
					<dd><input type="text" name="admin_pass" value="admin" data-rule="required" ></dd>
				</li>
			</ul>
			<div>
				<button>安装</button>
			</div>
		</form>
		<script src="/static/js/jquery.min.js"></script>
		<script src="/static/js/layer/layer.js"></script>
		<script src="/static/js/jquery.form.min.js"></script>
		<script src="/static/js/validator/jquery.validator.min.js?local=zh-CN"></script>
		<script>
			$(function(){
				$('.form-ajax').on('valid.form', function() {
					$(this).ajaxSubmit({
						beforeSend: function(e) {
							var sub = $('.ajax-form').find("#sub");
							sub.data("title", sub.html()).html("安装中").attr("disabled", "disabled");
							layer.load(2, {
								shade: [0.1, '#000']
							});
						},
						error: function(e) {
							layer.closeAll('loading');
							var sub = $('.ajax-form').find("#sub");
							sub.html(sub.data("title")).removeAttr("disabled", "disabled");
							layer.alert("提交失败！");
						},
						success: function(data) {
							console.log(data);
							layer.closeAll('loading');
							var sub = $('.ajax-form').find("#sub");
							sub.html(sub.data("title")).removeAttr("disabled", "disabled");
							if (data.msg) {
								layer.msg(data.msg, {
									icon: data.code,
									shade: [0.1, '#000'],
									time: 1500
								}, function() {
									if (data.url) {
										location.href = data.url;
									}
								});
							} else if (data.url) {
								location.href = data.url;
							}
						}
					});
					return false;
				});
				
			})
		</script>
	</body>
</html>
